<template>
	<div>
		<!--start 头部-->
		<!--<div class="sreePublic">
  		<div id="" style="text-align: center;">
  			<em class="iconfont" @click="$router.go(-1)">&#xe61f;</em>
  		</div>
			{{vue_header_title}}
  	</div>-->
		<!--start 头部-->
		<!--start content-->
		<div class="content">
			<div class="userInfo">
				<div class="countDown font_bold">
					<p class="time clearfix">
						<span class="fl" :class="vue_order_stateIcon">
  						{{vue_order_stateText}}
  					</span>
						<span class="fr" v-if="vue_pageDiv_countDownTime">
  						剩余： 0小时0分钟
  					</span>
					</p>
					<p v-if="vue_pageDiv_countDownPric">需付款： &yen; {{Public.formatMoney(vue_order_detail.orderTotalMoney,2)}}</p>
				</div>
				<div class="address">
					<p class="namePhone font_bold">{{vue_order_detail.deliveryContact}} {{vue_order_detail.deliveryPhone | phone}}</p>
					<p>
						地址：{{vue_order_detail.deliveryArea}}{{vue_order_detail.deliveryAddress}}
					</p>
				</div>
			</div>
			<div class="orderGoodsInfo">
				<div v-if="vue_moreGoodsPic" class="rightIcon">
					<p class="infoTitle">联系卖家</p>
					<ul class="goodsContent clearfix" @click="$router.push({path:'/orderGoodsList',query:{'orderGoodsList':'orderGoodsList'}})">
						<li class="fl" v-for="(item,index) in vue_goods_pic">
							<img :src="item.goodsBigPic" width="100%" height="100%" alt="" />
						</li>
						<li class="fr goodsNum">共{{countNum}}件</li>
					</ul>
					<Icon type="chevron-right lookDetail"></Icon>
				</div>
				<div v-else>
					<p class="infoTitle" @click="vfun_im">联系卖家</p>
					<div class="goodsContent clearfix">
						<div class="img fl">
							<img :src="vue_order_detail.saleOrderGoodsDataList[0].goodsBigPic" width="100%" height="100%" alt="" />
						</div>
						<div class="detail fl">
							<p class="title">{{vue_order_detail.saleOrderGoodsDataList[0].goodsName}}</p>
							<p class="spe">{{vue_order_detail.saleOrderGoodsDataList[0].goodsSkuValue}}</p>
							<p class="pri">
								&yen; {{Public.formatMoney(vue_order_detail.saleOrderGoodsDataList[0].goodsSalePrice,2)}}
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="orderInfo">
				<div>
					<p>订单编号：<span class="font_bold">{{vue_order_detail.orderCode}}</span></p>
					<p>下单时间：<span class="font_bold">{{vue_order_detail.createDateStr}}</span></p>
				</div>
				<div>
					<p>支付方式：{{vue_order_detail.orderPayStateStr }}</p>
				</div>
				<div>
					<p>发票类型：{{vue_order_detail.invoiceType | invoiceType}}</p>
				</div>
			</div>
			<div class="orderPric">
				<div class="goodsSum clearfix">
					<span class="fl">商品金额</span>
					<span class="fr" style="color:#D50B0A;">&yen;{{Public.formatMoney(vue_order_detail.orderTotalMoney,2) }}</span>
				</div>
				<div class="transportSum clearfix">
					<span class="fl">+运费</span>
					<span class="fr" style="color:#D50B0A;">&yen;{{Public.formatMoney(vue_order_detail.orderTotalFreight,2) }}</span>
				</div>
			</div>
			<div class="totalPric">
				<p>总金额：<span style="color:#D50B0A;">&yen; {{Public.formatMoney(vue_order_detail.orderTotalMoney,2) }}</span></p>
			</div>
		</div>
		<!--end content-->
		<!--start footer-->
		<div class="footer">
			<!--   先不要加删除  
  		<div @click="vFun_order_delete" class="deleteBtn fl transparent" v-if="vue_order_state===6||vue_order_state===-1">
  			删除订单
  		</div>-->
			<div @click="vFun_order_widthDrawR" class="okOrderBtn fr red" v-if="vue_order_state===3||vue_order_state===5">
				{{vue_btn_text1}}
			</div>
			<div @click="vFun_order_widthDrawL" class="cancelOrderBtn fr" :class="{red:vue_order_state===6||vue_order_state===-1}">
				{{vue_btn_text2}}
			</div>
		</div>
		<!--end footer-->
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'; //引入弹框	
	import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
				vue_header_title: '订单详情', //头部title
				vue_order_state: 3, //等待付款   3，  等待收货  5，完成  6，取消  -1
				vue_order_stateText: '等待付款', //订单状态
				vue_order_stateIcon: 'active0', //订单状态icon
				vue_pageDiv_countDownPric: true, //订单金额总计是否显示
				vue_pageDiv_countDownTime: true, //订单倒计时是否显示
				vue_btn_text1: "去支付",
				vue_btn_text2: "取消订单",
				BasicMemberAndMemberOperatorData: {},
				saleOrderData: [{ //商品清单dataList
					src: require('../../assets/img/1.jpg')
				}],
				vue_goods_pic: [{
					src: require('../../assets/img/1.jpg')
				}, {
					src: require('../../assets/img/2.jpg')
				}, {
					src: require('../../assets/img/3.jpg')
				}],
				vue_order_code: '',
				vue_order_detail: {},
				vue_moreGoodsPic: true
			}
		},
		computed: {
			countNum: function() { //统计订单总的商品数量
				if(this.vue_order_detail.saleOrderGoodsDataList) {
					return this.vue_order_detail.saleOrderGoodsDataList.reduce((a, b) => {
						return a + b.goodsBuyNum;
					}, 0)
				} else {
					return 0;
				}
			},
		},
		filters: {
			phone: function(val) {
				if(val) {
					return val.substr(0, 3) + '****' + val.substr(7, 4);
				}
			},
			invoiceType: function(val) {
				if(val == '0') {
					return '不开发票';
				} else if(val == '2') {
					return '普通发票';
				} else if(val == '3') {
					return '增值税发票';
				}
			}
		},
		methods: {
			query_orderDetail(orderCode) { //查询订单详情
				this.axios({
					method: "GET",
					url: "/v3/sale/orders/" + orderCode
				}).then((res) => {
					this.vue_order_detail = res.data;
					this.vue_moreGoodsPic = this.vue_order_detail.saleOrderGoodsDataList.length > 1 ? true : false;
				})
			},
			vFun_order_delete() { //删除订单
				MessageBox({
					title: '提示',
					message: '确定删除订单？',
					showCancelButton: true
				}).then((a) => {
					if(a == 'confirm') {
						this.axios({
							method: "DELETE",
							url: "/v3/sale/orders/" + this.vue_order_code
						}).then((res) => {
							this.Public.vFun_openSuccess('删除成功！');
							this.$router.go(-1);
						}).catch((err) => {
							this.Public.vFun_openError('删除失败！');
						})
					} else {

					}
				})
			},
			vFun_order_widthDrawR() { 
				if(this.vue_order_state == '3'){  //状态为3时候，订单就是待付款状态,去支付
					localStorage.setItem("orderCode",this.vue_order_code);
					this.$router.push({path:'/orderPay'})
				}else if(this.vue_order_state == '5'){  //状态为5时候，订单就是等待收货状态，确认收货
					MessageBox({
						title: '提示',
						message: '确定收货？',
						confirmButtonClass: 'redBg',
						showCancelButton: true
					}).then(btnType => {
						if(btnType == 'confirm') {
							this.axios({
								method:"PATCH",
								url:"/v3/sale/orders/"+this.vue_order_code+"/batchConfirmshipment",
								data:{}
							}).then((res)=>{
								this.Public.vFun_openSuccess('操作成功！');
								this.$router.go(-1);
							}).catch((err)=>{
								this.Public.vFun_openError(err.response.data);
							})
						} else {

						}
					})
				}
			},
			vFun_order_widthDrawL() { 
				if(this.vue_order_state == '3') { //状态为3时候，订单就是待付款状态，取消订单
					MessageBox({
						title: '提示',
						message: '确定取消订单？',
						confirmButtonClass: 'redBg',
						showCancelButton: true
					}).then(btnType => {
						if(btnType == 'confirm') {
							this.axios({
								method: "PATCH",
								url: "/v3/sale/orders/" + this.vue_order_code + "/batchWithdraw",
								data: {}
							}).then((res) => {
								this.Public.vFun_openSuccess('取消成功！');
								this.$router.go(-1);
							}).catch((err) => {
								this.Public.vFun_openError(err.response.data);
							})
						} else {

						}
					})
				} else if(this.vue_order_state == '5') {  //状态为5时候，订单就是等待收货状态，再次购买
					this.axios({
						method: "POST",
						url: "/v3/sale/cartGoodss/" + this.vue_order_code + "/buyAgain",
						data: {}
					}).then((res) => {
						this.$router.push({
							path: '/shopingCart'
						});
						this.Public.vFun_openSuccess('操作成功！')
					}).catch((err) => {
						this.Public.vFun_openError('操作失败！')
					})
				}else if(this.vue_order_state == '-1'||this.vue_order_state == '6'){  //状态为-1时候，订单就是取消状态;状态为6时候，订单就是完成状态，再次购买
					this.axios({
						method: "POST",
						url: "/v3/sale/cartGoodss/" + this.vue_order_code + "/buyAgain",
						data: {}
					}).then((res) => {
						this.$router.push({
							path: '/shopingCart'
						});
						this.Public.vFun_openSuccess('操作成功！')
					}).catch((err) => {
						this.Public.vFun_openError('操作失败！')
					})
				}
			},
			vfun_im() {
					//查询是否开通客服
				this.axios({
		          method:"GET",
		          url:"v3/custom/accounts/00000000",
		          data:{},
		        }).then((res) =>{
		        	var sysNum = res.data.accountKey;
					var zhichiUrl = "https://www.sobot.com/chat/h5/index.html?sysNum="+sysNum;
					/*设置用户信息*/
					if(this.BasicMemberAndMemberOperatorData.memberName == ""||this.BasicMemberAndMemberOperatorData.memberName==undefined){
						zhichiUrl+="&uname=游客";//昵称
					}else{
						zhichiUrl+="&tel="+this.BasicMemberAndMemberOperatorData.operatorPhone;//电话或手机
						zhichiUrl+="&email="+this.BasicMemberAndMemberOperatorData.operatorEmail;//邮箱
						zhichiUrl+="&uname="+this.BasicMemberAndMemberOperatorData.memberName;//昵称
						zhichiUrl+="&face="+this.BasicMemberAndMemberOperatorData.operatorPortraitUrl;//头像URL
						zhichiUrl+="&realname="+this.BasicMemberAndMemberOperatorData.memberName;//真实姓名
						zhichiUrl+="&weibo=";//微博账号
						zhichiUrl+="&weixin=";//微信账号
						zhichiUrl+="&qq="+this.BasicMemberAndMemberOperatorData.operatorQq;//QQ号
						zhichiUrl+="&sex=";//0 女 1 男
						zhichiUrl+="&birthday=";//生日，如“1990-01-01”
						zhichiUrl+="&remark=";//用户的备注信息
					}
					/*设置title信息*/
						zhichiUrl+="&back=2";//设置back=1时，显示title
						zhichiUrl+="&titleFlag=3";//设置页面title的显示内容，有效值1、2、3；1 显示console后台设置的企业名称（默认），2 显示传入的固定文案1-30字符，3显示当前客服昵称（机器人昵称、人工客服昵称）
						zhichiUrl+="&customTtile='咨询客服'";//当titleFlag=2时，通过此参数设置固定文案内容，1-30字符		
					window.location.href = zhichiUrl;   
				}).catch((err) =>{
        			this.axios({
						method: "GET",
						url: "/v3/member/operators?operatorCode=00000000",
					}).then((res) => {
						window.location.href = "tel:"+res.data.operatorPhone;
					}).catch((err) =>{
						Toast({
			              message:"卖家未开通客服",
			              iconClass: 'fontSize iconfont icon-shibai'
			          	});
					});	
      			});	
			},
		},
		watch: {
			vue_order_state: function(val, oldVal) {
				switch(val) {
					case 3:
						this.vue_order_stateIcon = 'active0';
						this.vue_pageDiv_countDownPric = true;
						this.vue_pageDiv_countDownTime = false;
						this.vue_order_stateText = "等待付款";
						this.vue_btn_text1 = "去支付";
						this.vue_btn_text2 = "取消订单";
						break;
					case 5:
						this.vue_order_stateIcon = 'active1';
						this.vue_pageDiv_countDownPric = false;
						this.vue_pageDiv_countDownTime = false;
						this.vue_order_stateText = "等待收货";
						this.vue_btn_text1 = "确认收货";
						this.vue_btn_text2 = "再次购买";
						break;
					case 6:
						this.vue_order_stateIcon = 'active2';
						this.vue_pageDiv_countDownPric = false;
						this.vue_pageDiv_countDownTime = false;
						this.vue_order_stateText = "完成";
						this.vue_btn_text1 = "确认收货";
						this.vue_btn_text2 = "再次购买";
						break;
					case -1:
						this.vue_order_stateIcon = 'active3';
						this.vue_pageDiv_countDownPric = false;
						this.vue_pageDiv_countDownTime = false;
						this.vue_order_stateText = "取消";
						this.vue_btn_text1 = "确认收货";
						this.vue_btn_text2 = "再次购买";
						break;
				}
			}
		},
		created() {

		},
		mounted() {},
		activated() {
			this.vue_goods_pic=JSON.parse(localStorage.getItem('saleOrderGoodsDataList'));
			this.vue_order_state = this.$route.query.orderType;
			this.vue_order_code = this.$route.query.orderCode;
			this.query_orderDetail(this.vue_order_code); //查询订单详情
			document.querySelector('#vue_id_title').innerHTML = "订单详情";
			this.axios({
				method: 'GET',
				url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
				data: {}
			}).then((res) => {
				this.BasicMemberAndMemberOperatorData = JSON.parse(JSON.stringify(res.data));
			}).catch((err) => {

			});
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.font_bold {
		font-weight: bold;
	}
	
	.inside_header {
		height: 1.2rem;
	}
	
	.content {
		background: #D2D3D9;
	}
	
	.userInfo {
		width: 100%;
		margin-bottom: 10px;
	}
	
	.userInfo .countDown {
		width: 100%;
		line-height: .9rem;
		background: #E3222E;
		color: #fff;
		padding: 0.4rem 10px;
	}
	
	.userInfo .countDown .time {
		width: 100%;
	}
	
	.userInfo .countDown .time>span:nth-of-type(1) {
		position: relative;
		padding-left: 1rem;
	}
	
	.userInfo .countDown .time>span:nth-of-type(1)::after {
		content: '';
		position: absolute;
		width: .7rem;
		height: .7rem;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	.userInfo .countDown .time>span.active0:nth-of-type(1)::after {
		background: url('../../assets/img/countDown_icon.png') center center/cover no-repeat;
	}
	
	.userInfo .countDown .time>span.active1:nth-of-type(1)::after {
		background: url('../../assets/img/loading_icon.png') center center/cover no-repeat;
	}
	
	.userInfo .countDown .time>span.active2:nth-of-type(1)::after {
		background: url('../../assets/img/end_icon.png') center center/cover no-repeat;
	}
	
	.userInfo .countDown .time>span.active3:nth-of-type(1)::after {
		background: url('../../assets/img/delete_icon.png') center center/cover no-repeat;
	}
	
	.userInfo .countDown p:nth-of-type(2) {
		text-align: right;
	}
	
	.userInfo .address {
		width: 100%;
		height: 50%;
		line-height: .9rem;
		padding: 0.4rem 10px;
		background: #fff;
	}
	
	.userInfo .address .namePhone {
		position: relative;
		width: 100%;
		padding-left: 1rem;
		white-space: pre-wrap;
	}
	
	.userInfo .address .namePhone::after {
		content: '';
		position: absolute;
		width: .7rem;
		height: .7rem;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background: url('../../assets/img/address_icon.png') center center/cover no-repeat;
	}
	
	.userInfo .address p:nth-of-type(2) {
		width: 100%;
		padding-left: 1rem;
	}
	
	.orderGoodsInfo {
		width: 100%;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.orderGoodsInfo .infoTitle {
		position: relative;
		width: 100%;
		line-height: 1rem;
		text-align: right;
		padding-right: 1rem;
		border-bottom: 1px solid #bbb;
	}
	
	.orderGoodsInfo .infoTitle:after {
		content: '';
		position: absolute;
		width: .5rem;
		height: .5rem;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		background: url('../../assets/img/customService_icon.png') center center/cover no-repeat;
	}
	
	.orderGoodsInfo .goodsContent {
		width: 100%;
		padding: 10px;
		background: #F5F7F6;
	}
	
	.img {
		width: 1.86rem;
		height: 1.86rem;
	}
	
	.detail {
		width: 7.2rem;
		line-height: 0.6rem;
		padding-left: 10px;
	}
	
	.detail .title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.detail .spe {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #ccc;
	}
	
	.detail .pri {
		width: 100%;
		color: #D50B0A;
	}
	
	.goodsContent li {
		width: 2rem;
		height: 2rem;
		margin-left: 10px;
		line-height: 2rem;
	}
	
	.rightIcon {
		position: relative;
	}
	
	.rightIcon .lookDetail {
		position: absolute;
		top: 50%;
		right: 0.4rem;
		font-size: 14px;
		transform: translateY(calc(-50% + .5rem));
	}
	
	.orderInfo {
		width: 100%;
		margin-bottom: 10px;
		line-height: .7rem;
		background: #fff;
	}
	
	.orderInfo div:nth-of-type(1) {
		width: 100%;
		padding: 0.2rem 10px;
		border-bottom: 1px solid #bbb;
	}
	
	.orderInfo div:nth-of-type(2) {
		width: 100%;
		padding: 0.4rem 10px;
		border-bottom: 1px solid #bbb;
	}
	
	.orderInfo div:nth-of-type(3) {
		width: 100%;
		padding: 0.4rem 10px;
		border-bottom: 1px solid #bbb;
	}
	
	.orderPric {
		width: 100%;
		line-height: .8rem;
		background: #fff;
		padding: 0.2rem 0.4rem 0.2rem 10px;
	}
	
	.totalPric {
		border-top: 1px solid #bbb;
		background: #fff;
		text-align: right;
		padding: 0.4rem 10px;
		margin-bottom: 1.33rem;
	}
	
	.footer {
		position: fixed;
		width: 100%;
		height: 1.33rem;
		bottom: 0;
		left: 0;
		background: #F0F0F2;
		border-top: 1px solid #BBB;
	}
	
	.okOrderBtn,
	.cancelOrderBtn,
	.deleteBtn {
		width: 2.08rem;
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: center;
		margin: .265rem 10px;
		color: #736D6E;
		border: 1px solid #736D6E;
		border-radius: 5px;
	}
	
	.red {
		color: #D50B0A;
		border-color: #D50B0A;
	}
	
	.transparent {
		border-color: transparent;
	}
</style>